Date and time fields (Tumblers)

Summary

Can be used in forms for inline editing.
Only possible for setting date and time. Three versions:
- Date field.
- Time field.
- Combined Date and time field.
2 - 3 columns.
The currently selected value row is centred.
Always embedded into a view and the view as such must remain scrollable.
Columns can loop (e.g., 0 - 9).

Java components

Related design guidelines

Forms

Tumblers enable users to select a time and a date. Select the default value in a way that the user has to do as little changes as possible, e.g. set today's date as the default if it is likely to be the desired value in most use cases.

Date and Time tumbler in Forms – portrait orientation
Figure 1. Date and Time tumblers in Forms, portrait and landscape orientation	Set date or time. Value is taken when closing the view. When not expanded: Only the parent item is shown. Contains a heading line, a value line and an arrow pointing to the right. When expanded: The columns are shown below the title and value line. The current value is vertically centred. The arrow points downwards. User can change the value by dragging or flicking the columns. Tapping again on the title/status line or on any other items in the form will collapse the tumbler. Available in both orientations, but not recommended for landscape use due to limited screen real-estate.

Date and Time tumbler in Forms – portrait orientation

Figure 1. Date and Time tumblers in Forms, portrait and landscape orientation

Set date or time.
Value is taken when closing the view.
When not expanded:
- Only the parent item is shown.
- Contains a heading line, a value line and an arrow pointing to the right.
When expanded:
- The columns are shown below the title and value line.
- The current value is vertically centred.
- The arrow points downwards.
- User can change the value by dragging or flicking the columns.
- Tapping again on the title/status line or on any other items in the form will collapse the tumbler.
Available in both orientations, but not recommended for landscape use due to limited screen real-estate.

Datetime tumbler in Forms – portrait orientation
Figure 2. Datetime tumbler in Forms - portrait orientation	Set date and time. Date and time items can be combined in Forms. Value is taken when closing the view. When not expanded: Only the parent item is shown. Contains a heading line, a value line and an arrow pointing to the right. When expanded: The columns are shown below the title and value line. The current value is vertically centred. The arrow points downwards. User can change the value by dragging or flicking the columns. Tapping again on the title/status line or on any other items in the form will collapse the tumbler. Available in both orientations, but not recommended for landscape use due to limited screen real-estate.

Datetime tumbler in Forms – portrait orientation

Figure 2. Datetime tumbler in Forms - portrait orientation

Set date and time.
Date and time items can be combined in Forms.
Value is taken when closing the view.
When not expanded:
- Only the parent item is shown.
- Contains a heading line, a value line and an arrow pointing to the right.
When expanded:
- The columns are shown below the title and value line.
- The current value is vertically centred.
- The arrow points downwards.
- User can change the value by dragging or flicking the columns.
- Tapping again on the title/status line or on any other items in the form will collapse the tumbler.
Available in both orientations, but not recommended for landscape use due to limited screen real-estate.